<template>
  <div class="department-container">
    <div class="app-container">
      <!-- <el-card> -->
      <!-- 具体页面结构 -->
      <!-- </el-card> -->
      <!-- @tab-click="handleClick" -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <el-button type="primary" size="mini" @click="addRoleBtn">新增角色</el-button>
          <div class="table">
            <el-table
              :cell-style="cellStyle"
              :header-cell-style="rowClass"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="130"
              />
              <el-table-column
                prop="name"
                label="角色"
                width="180"
              />
              <el-table-column
                prop="description"
                label="描述"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button type="success" size="small" @click="handleClick1(scope.row)">分批权限</el-button>
                  <el-button type="primary" size="small" @click="editRole(scope)">编辑</el-button>
                  <el-button type="danger" size="small" @click="deleteBtn(scope.row.id)">删除</el-button>
                </template>

              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination

              layout="prev, pager, next,total,sizes"
              :total="total"
              :current-page.sync="form.page"
              :page-size.sync="form.pagesize"
              :page-sizes="[2, 4, 6, 8]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">公司信息</el-tab-pane>
      </el-tabs>

    </div>
    <el-dialog
      :title="isEdit?'编辑角色':'新增角色'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- <span>新增角色</span> -->
      <!-- <span slot="footer" class="dialog-footer"> -->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="ruleForm.description" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
      <!-- </span> -->
    </el-dialog>
  </div>
</template>
<script>
import { getRolesListRequest, addRolesRequest, delRolesRequest } from '@/api/setting'
export default {
  name: 'Dadasdadaq',
  data() {
    return {
      dialogVisible: false,
      total: 0,
      activeName: 'first',
      tableData: [],
      isEdit: false,
      form: {
        // 根据接口来的
        page: 1,
        pagesize: 2
      },
      // 新增角色
      ruleForm: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 最多的页面值：
    maxPageNum() {
      return Math.ceil(this.total / this.form.pagesize)
    },
    // 最后一页是否填满
    isLastPageFull() {
      return this.total % this.form.pagesize === 0
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // cellSyle和rowClass设置表格样式居中
    cellStyle(row, colum, rowIndex, columIndex) {
      return 'text-align:center'
    },
    rowClass(row, rowIndex) {
      return 'text-align:center'
    },
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // },
    handleSizeChange(value) {
      // 每页显示条数对改变
      console.log(value)
      this.form.pagesize = value
      this.getRolesList()
    },
    handleCurrentChange(value) {
      // 页面值的改变
      console.log(value)
      this.form.page = value
      //   console.log(this.form.page)
      this.getRolesList()
    },
    handleClick1(e) {

    },
    // 获取角色列表
    async getRolesList() {
      try {
        const res = await getRolesListRequest(this.form)
        this.tableData = res.data.rows
        this.total = res.data.total
        this.addRoles()
      } catch (err) {
        console.log(err)
        this.$message.error('获取角色列表失败')
      }
    },
    async addRoles() {
      try {
        const res = await addRolesRequest(this.ruleForm)
        console.log(res)
        if (res.success) {
          // 判断涉及动态数据（计算属性）
        //   if(this.isLastPageFull){}
        }
      } catch (err) {
        // this.$message.error('添加失败')
      }
    },
    async delRoles(id) {
      try {
        const res = await delRolesRequest(id)
        console.log(res)
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    addRoleBtn() {
      this.dialogVisible = true
      this.isEdit = false
    },
    editRole(scope) {
      this.dialogVisible = true
      this.isEdit = true
      console.log(scope)
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        if (valid) {
          this.addRoles()
        }
        this.getRolesList()
      })
    },
    // 删除按钮
    deleteBtn(id) {
      console.log(id)
      this.delRoles(id)
      this.getRolesList()
    }
  }
}
</script>
<style scoped>
.table{
    margin-top: 20px;
}
.pagination{
 margin-top: 15px;
 text-align: right;
}
</style>
